const component_floor_title = `
<div class="floor_title">
    <div class="floor_title_content">
        <div class="floor_title_content_index border-editable" @click="setTitle('index')">{{titleStr}}</div>
            <img src="/app/admin/view/public/img/floor_title.png" alt="" v-if='imgShow'>
        <div class="floor_title_content_text border-editable" @click="setTitle('text')">{{subTitleStr}}</div>
    </div>

    <div class="floor_title_link">
        <span class="floor_title_content_text border-editable" @click='setmore'>{{linkOjb.content}}</span>
        <i class="el-icon-arrow-right"></i>
    </div>

    <el-dialog title="更多设置" top="25vh" :visible.sync="linkVisible" width="25%" :modal-append-to-body="false">
        <el-form :model="linkOjb" label-position="left" label-width="150px">
            <el-form-item label="跳转地址">
                <el-input v-model="linkOjb.url"></el-input>
            </el-form-item>
            <el-form-item label="更多标题">
                <el-input v-model="linkOjb.content"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click.stop="handleSetMore" size="small">确 定</el-button>
        </span>
    </el-dialog>
    <el-dialog title="标题设置" top="25vh" :visible.sync="titleVisible" width="25%" :modal-append-to-body="false">
        <div  v-if="isShow"  >
            <span>请输入楼层索引内容:</span>
            <el-input v-model="titleStr"></el-input>
        </div>
        <div v-else style="display:flex">
            <span>请输入楼层标题:</span>
            <el-input v-model="subTitleStr" ></el-input>
        </div>
        
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click.stop="handleTitle" size="small">确 定</el-button>
        </span>
    </el-dialog>
</div>
`

Vue.component('floor-title', {
    props: {
        title: {
            type: String,
            default: '1F',
        },
        subTitle: {
            type: String,
            default: 'NiuShop',
        },
        link: {
            type: Object,
            default: () => {
                return {
                    url: '',
                    content: '',
                }
            },
        },
        imgShow: {
            types: Boolean,
            default: true,
        },
    },
    data: function () {
        return {
            linkVisible: false,
            linkOjb: this.link,
            titleStr: this.title,
            subTitleStr: this.subTitle,
            titleVisible: false,
            isShow: false,
        }
    },
    methods: {
        // setTitle(type) {
        //     this.$prompt(type === 'index' ? '请输入楼层索引内容' : '请输入楼层标题', '提示', {
        //         confirmButtonText: '确定',
        //         cancelButtonText: '取消',
        //     })
        //         .then(({ value }) => {
        //             if (type === 'index') this.titleStr = value
        //             else this.subTitleStr = value

        //             this.$emit('change', { title: this.titleStr, subTitle: this.subTitleStr, link: this.linkOjb })
        //         })
        //         .catch(err => err)
        // },
        setTitle(type) {
            if (type === 'index') {
                this.isShow = true
            } else {
                this.isShow = false
            }
            this.titleVisible = true
        },
        handleTitle() {
            this.titleVisible = false
            this.$emit('change', { title: this.titleStr, subTitle: this.subTitleStr, link: this.linkOjb })
        },
        handleSetMore() {
            this.linkVisible = false
            this.$emit('change', { title: this.titleStr, subTitle: this.subTitleStr, link: this.linkOjb })
        },

        setmore() {
            this.linkVisible = true
        },
    },
    watch: {
        link: function (curr) {
            this.linkOjb = curr
        },
        title: function (curr) {
            this.titleStr = curr
        },
        subTitle: function (curr) {
            this.subTitleStr = curr
        },
    },
    template: component_floor_title,
})
